

<template>
  <van-nav-bar title="媒体资源" />
  <div>
<h4>资源类型</h4>
<van-radio-group v-model="data.mediaType">
  <van-radio name="image">图片</van-radio>
  <van-radio name="video">视频</van-radio>
  <van-radio name="file">文件</van-radio>
</van-radio-group>
<h4>获取方式</h4>
<van-radio-group v-model="data.sourceType" v-if="data.mediaType!='file'">
  <van-radio name="camera">拍照</van-radio>
  <van-radio name="album">相册</van-radio>
  <van-radio name="all">拍照或相册</van-radio>
</van-radio-group>
<h4>文件数量</h4>
<van-cell-group inset>
  <van-field v-model="data.count" label="文件数量"  />
  只有选择照片时才能大于1，其他数量只能为1
</van-cell-group>


    <van-button type="primary" style="margin-top: 20px" @click="startGetMedia"
      >打开媒体资源</van-button
    >

    <div>选择结果：</div>
    <div>{{ files }}</div>
  </div>
</template>

<script setup lang='ts' name='' >
import { showToast } from "vant";
import { reactive, ref } from "vue";

// Your script here

let data = reactive({
  mediaType: "image",
  sourceType:"album",
  count:1
});
let files = ref({})

const startGetMedia = () => {
  (window as any).whJSBridge.getMedia(getMediaCallback, JSON.stringify(data)).then(
    function(res:any) {
      console.log("打开媒体成功");
    }).catch((err:any) => {
    console.log(err);
    alert(err);
  })
};


function getMediaCallback(dataStr:any) {
  const data = JSON.parse(dataStr);

  console.log("getMediaCallback");
  if (data.flag) {
    files.value  = data.data;
  } else {
    //用户取消了，拍照或者选择图片
    showToast(data.msg);
  }
}
</script>

<style scoped >
/* Your styles here */
</style>